<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机产生20个4位整数并排序</title>
  <style>
    button {
       border-radius: 10px;
       padding: 5px 8px;
       margin: 2px 5px;
       cursor: pointer;
       }
  </style>
</head>

<body>
<h3>随机产生20个4位整数并从小到大进行排序</h3>
<textarea id="result" rows="10" cols="50"></textarea><br>
<button id="generateBtn">随机产生20个整数</button>
<button id="findDivisibleBtn">找出能被5整除的整数</button>
<button id="resetBtn">重置</button>
<script>
  // 获取按钮和文本框元素
const generateBtn = document.getElementById('generateBtn');
const findDivisibleBtn = document.getElementById('findDivisibleBtn');
const resetBtn = document.getElementById('resetBtn');
const resultTextarea = document.getElementById('result');

// 生成20个4位随机整数并排序
function generateAndSortNumbers() {
const numbers = [];
for (let i = 0; i < 20; i++) {
const randomNumber = Math.floor(Math.random() * 9000 + 1000);
numbers.push(randomNumber);
}
numbers.sort((a, b) => a - b);
return numbers;
}

// 点击“随机产生20个整数”按钮的事件处理函数
generateBtn.addEventListener('click', () => {
const numbers = generateAndSortNumbers();
resultTextarea.value = `随机产生20个4位整数，分别如下：\n${numbers.join(', ')}`;
});

// 点击“找出能被5整除的整数”按钮的事件处理函数
findDivisibleBtn.addEventListener('click', () => {
const numbersText = resultTextarea.value;
if (numbersText) {
const numbers = numbersText.split(', ').map(Number);
const divisibleByFive = numbers.filter(num => num % 5 === 0);
resultTextarea.value += `\n能被5整除的整数有：\n${divisibleByFive.join(', ')}`;
}
});

// 点击“重置”按钮的事件处理函数
resetBtn.addEventListener('click', () => {
resultTextarea.value = '';
});
</script>
</body>

</html>